<!-- 提现的一项 -->
<template>
	<view class="listItem">
		<view class="left">
			<text class="left-title">
				{{pageData.type | typeName}}
			</text>
			<text class="left-time" >{{pageData.createTime | timeFileter}}</text>
		</view>
		<view class="right">
			<text class="right-money">{{pageData.flag + pageData.amount}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			/**
			 * 数据
			 */
			data: {
				type:Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				pageData: {}, // 页面数据
			};
		},
		filters:{
			/**
			 * 将type转换成文字
			 */
			typeName(val){
				let str = ''
				switch(Number(val)){
					case 0 : str = '支付';
					break;
					case 1 : str = '结算';
					break;
					case 2 : str = '分佣';
					break;
					case 3 : str = '充值';
					break;
					case 4 : str = '提现';
					break;
					case 5 : str = '退款';
					break;
				}
				return str;
			},
			
			/**
			 * 转换时间格式
			 */
			timeFileter(val){
				let time = new Date(val)
				let str = time.getMonth()+1 +'月'+ time.getDate() + '日' + ' '+ time.getHours()+ ':'+ time.getMinutes()
				
				return str;
			}
		},
		watch:{
			data:{
				handler(val){
					this.pageData = {
						type: this.data.type, // 流水类型
						createTime: this.data.createTime, // 创建时间
						flag: this.data.flag, // 支出或者收入的符号
						amount: this.data.amount, // 金额
					}
				},
				immediate:true,
				deep:true
			}
		}
	}
</script>

<style lang="less" scoped>
	.listItem{
		#flex(-,space-between,center);
		height: 124rpx;
		margin: 0 32rpx;
		
		.left{
			#flex(column);
			
			.left-title{
				#font(28rpx,#0f0d21);
			}
			
			.left-time{
				margin-top: 12rpx;
				#font(20rpx,#8c8a8a);
			}
		}
		
		.right{
			.right-money{
				#font(28rpx,#0f0d21);
			}
		}
	}
</style>
